
.fadeIn-enter-active{
    animation: fadeIn 0.5s linear;
}
.fadeIn-leave-active{
    animation: fadeIn 0.5s reverse;
}
.fadeInHeight-enter-active{
    animation: fadeInHeight 0.5s linear;
}
.fadeInHeight-leave-active{
    animation: fadeInHeight 0.5s reverse;
}
.leftToRight-enter-active{
    animation: leftToRight 0.5s linear;
}
.leftToRight-leave-active{
    animation: leftToRight 0.5s reverse;
}
.topToBottom-enter-active{
    animation: topToBottom 0.5s linear;
}
.topToBottom-leave-active{
    animation: topToBottom 0.5s reverse;
}
@keyframes jump{
    from{
        transform: translateY(-100%);
    }
    to{
        transform: translateY(0px);
    }
}
@keyframes fadeIn{
    from{
        width:0;
        opacity: 0;
        height: 0;
    }
    to{
       opacity: 1;
       width: 100%;
       height: 100%;
    }
}
@keyframes leftToRight{
    from{
        transform: translate(-100%);
    }
    to{
        transform: translate(0px);
    }
}
@keyframes topToBottom{
    from{
        transform: translateY(-100%);
    }
    to{
        transform: translateY(0px);
    }
}
@keyframes widthChange{
    from{
        width: 0;
    }
    to{
        width: 100%;
    }
}

@keyframes fadeIn{
    from{
        width: 0;
        height:0;
    }
    to{
        width: 100%;
        height: 100%;
    }
}
@keyframes fadeInHeight{
    from{
        width: 100%;
        height:0;
    }
    to{
        width: 100%;
        height: 100%;
    }
}
@keyframes rotate{
    from{
       transform: rotate(0);
    }
    to{
        transform: rotate(360deg);
    }
}

/* 流动特效 */
.FlowEffect{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    /* background-color: black; */
 }
 .FlowEffect::before{
    content: '';
    position: absolute;
    z-index: 0;
    width: 1000px;
    height: 1000px;
    background-image: conic-gradient(transparent,transparent,transparent,#8758ff);
    animation: rotate 4s linear infinite;
 }
 .FlowEffect::after{
    content: '';
    position: absolute;
    z-index: 0;
    width: 1000px;
    height: 1000px;
    background-image: conic-gradient(transparent,transparent,transparent,#5cb8e4);
    animation: rotate 4s linear infinite;
    animation-delay: -2s;
 }

 /*风车前缀图片*/
.WindMill::before{
    content: '' ;
    display: inline-block;
    background: url('@/assets/markdown/h2.png') no-repeat;
    width: 25px;
    height: 25px;
    margin-right: 5px;
    background-size: 100% 100%;
    background-position: 0% 0%;
    animation: rotate linear 4s infinite;
}